<template>
  <div>
    <my-herade></my-herade>
    <div class="top-banner">
      <div class="bwrap">
        <div class="banner-1">
          <swiper class="swiper-container" :options="swiperOption">
            <swiper-slide
              ><img src="../assets/img/lbt-1.jpg" alt=""
            /></swiper-slide>
            <swiper-slide
              ><img src="../assets/img/lbt-2.jpg" alt=""
            /></swiper-slide>
            <swiper-slide
              ><img src="../assets/img/lbt-3.jpg" alt=""
            /></swiper-slide>
            <swiper-slide
              ><img src="../assets/img/lbt-4.jpg" alt=""
            /></swiper-slide>
            <swiper-slide
              ><img src="../assets/img/lbt-5.jpg" alt=""
            /></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div class="banner-r">
          <h3>杭州野生动物园</h3>
          <div class="tx-sction" style="margin-top: 30px">
            <img src="../assets/img/ds1.png" alt="" />
            <h5>开放时间</h5>
            <p id="bDate">9:30-16:30</p>
          </div>
          <div class="tx-sction">
            <img src="../assets/img/ds2.png" alt="" />
            <h5>开放时间</h5>
            <p id="bDizhi">浙江省杭州市富阳区九龙大道一号</p>
          </div>
          <div class="tx-sction">
            <img src="../assets/img/ds3.png" alt="" />
            <h5>景区电话</h5>
            <p id="bDianhua">400-102-6688</p>
          </div>
        </div>
      </div>
    </div>
    <div class="z-on" style="padding-bottom: 110px; position: relative">
      <div class="shiBg"></div>
      <div class="bwrap">
        <div class="time-w">
          <div id="xianshiW"></div>
        </div>
        <div class="time-w" style="margin-top: 40px; background: transparent">
          <div class="bab-btn-wrap">
            <div class="tab-btn katab-btn">
              <div class="ibtn active" style="width: 25%">
                门票
                <i></i>
              </div>
              <div class="ibtn" style="width: 25%">
                年卡

                <i></i>
              </div>
              <div class="ibtn" style="width: 25%">
                礼品卡/礼品票
                <i></i>
              </div>
            </div>
          </div>
          <!-- 产品 -->
          <div class="tab-con" style="background: #fff; padding-top: 60px">
            <div class="ka-title" style="display: block">
              <div class="k-sub k1">产品</div>
              <div class="k-sub k2">门市价</div>
              <div class="k-sub k3">官网价</div>
              <div class="k-sub k4" style="padding-left: 40px">数量</div>
            </div>
            <div class="tab-con-sub katab-sub">
              <div class="time-list" style="position: relative; z-index: 998">
                <!--  -->
                <div class="time-sub">
                  <div class="i">
                    <i
                      class="i1"
                      style="background: url(../assets/img/191227458700.jpg)"
                    ></i>
                    <h4>成人票</h4>
                    <ul>
                      <li>身份证入园;有条件退</li>
                    </ul>
                    <div class="yuPop">预定须知</div>
                  </div>

                  <!--  -->
                  <div class="r"></div>
                </div>
              </div>
            </div>
          </div>

          <!--    购票列表 -->
        </div>
      </div>
    </div>
    <my-foote></my-foote>
  </div>
</template>

<script>
  import myFoote from "@/components/my-foote.vue";
  import MyHerade from "@/components/my-herade.vue";
  export default {
    components: {myFoote, MyHerade},

    data() {
      return {
        data: null,
        swiperOption: {
          effect: "slide",
          pagination: {
            el: ".swiper-pagination",
            hideOnClick: true,
          },
        },
      };
    },
  };
</script>

<style lang="scss" scoped>
  .top-banner {
    width: 100%;
    height: 360px;
    background: url(../assets/img/p2Bg.jpg) center;
    overflow: hidden;
    .bwrap {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      .banner-1 {
        height: 100%;
        width: 620px;
        float: left;
        .swiper-container {
          margin-top: 26px;
          margin-left: auto;
          margin-right: auto;
          position: relative;
          overflow: hidden;
          list-style: none;
          padding: 0;
          z-index: 2;
          img {
            width: 100%;
          }
        }
      }
      .banner-r {
        position: relative;
        height: 100%;
        width: 550px;
        padding-left: 30px;
        float: left;
        h3 {
          color: #41822b;
          font-size: 36px;
          margin-top: 35px;
        }
        .tx-sction {
          width: 100%;
          overflow: hidden;
          margin-top: 20px;
          border-bottom: 1px solid #cccccc;
          img {
            float: left;
            margin-right: 10px;
          }
          h5 {
            margin: 0;
            margin-right: 0px;
            float: left;
            font-weight: bold;
            margin-right: 10px;
            font-size: 16px;
            color: #535353;
          }
          #bDate {
            float: left;
            color: #535353;
            font-size: 16px;
          }
        }
        .tx-sction {
          width: 100%;
          overflow: hidden;
          margin-top: 20px;
          border-bottom: 1px solid #cccccc;
        }
      }
    }
  }
  .z-on {
    padding-bottom: 110px;
    position: relative;
    overflow: hidden;
    background: url(../assets/img/p2Bg.jpg);
    padding-bottom: 100px;
    min-height: 1100px;
    .shiBg {
      height: 100% !important;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../assets/img/bg.jpg) no-repeat;
      background-size: auto;
      background-position: center;
      background-size: 100% auto;
    }
    .bwrap {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      .time-w {
        width: 100%;
        position: relative;
        top: 40px;
        background: #fff;
        padding-bottom: 0px;
        .bab-btn-wrap {
          width: 100%;
          height: 125px;
          background: #fff;
          padding-top: 25px;
          .tab-btn {
            width: 1160px;
            height: 90px;
            margin-left: 0;
            line-height: 60px;
            background: #fff;
            padding: 20px;
            overflow: hidden;
            text-align: center;

            .ibtn {
              background: url(../assets/img/aa.jpg);
              color: #fff;
              height: 50px;
              line-height: 50px;
              margin: 0 18px;
              color: #fff;
              cursor: pointer;
              text-align: center;
              font-size: 17px;
              border-top: 1px solid #cbcbcb;
              border-radius: 30px;
              display: inline-block;
            }
            .active {
              background: url(../assets/img/buyBg.jpg);
              color: #fff;
            }
          }
        }

        // 产品
        .tab-con {
          background: #fff;
          padding-top: 60px;
          .ka-title {
            display: block;
            height: 80px;
            border-bottom: 1px solid #e3e3e3;
            width: 95%;
            margin: 0 2.5%;
            line-height: 60px;
            padding-top: 20px;
            .k1 {
              width: 60%;
            }
            .k2 {
              width: 13%;
            }
            .k3 {
              width: 13%;
            }

            .k-sub {
              float: left;
              color: #979797;
            }
          }
          .tab-con-sub .katab-sub {
            .time-list {
              width: 95%;
              margin-left: 2.5%;
              height: 180px;
              padding-top: 25px;
              padding-bottom: 20px;
              border-bottom: 1px solid #e3e3e3;
              display: block;
              cursor: pointer;
              transition: 0.5s;
              .time-sub {
                width: 95%;
                margin-left: 2.5%;
                height: 180px;
                padding-top: 25px;
                padding-bottom: 20px;
                border-bottom: 1px solid #e3e3e3;
                display: block;
                cursor: pointer;
                transition: 0.5s;
                .l {
                  .i1 {
                    float: left;
                    width: 130px;
                    height: 100%;
                    background: url(../assets/img/buyBg.jpg) no-repeat;
                    background-size: 100% 100%;
                    background-size: cover;
                    border-radius: 10px;
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
